{% extends 'base.html' %}

{% block content %}
<style>
  a {
      text-decoration: none;
      color: black;
      font-size: 25px;
      }
  #complaint {
      position: relative;
      top: 50%;
      transform: translate(0, -50%);
      background:#22742b;
      border-color:#22742b;
  }
</style>
    <h1 class="text-center m-4">Список еды</h1>
    <div class="row row-cols-3 mt-3" >
      {% for food in food %}
            <div class="col text-center p-2">
                <div class="card"  style="border-radius: 20px;">
                    <div class="card-body">
                        <a href="/food/item/?id={{food.id}}" style="height: 400px; width: 400px;">
                            <img src='{{food.image.url}}' height="375px" width="375px" class="img-responsive" style="border-radius: 0;" alt="...">
                            <p class="card-text pt-3">{{ food.name }}</p>

                        </a>
                        <div class="row row-cols-3 mt-3 mb-3">
                            <div class="col-4">
                                <a href="?id={{food.id}}" >
                                    {% if food.id in liked_food_id %}
                                    <svg  id="heart" onclick="add_like({{food.id}})"
                                         xmlns="http://www.w3.org/2000/svg" width="30"
                                         height="30" fill="red" class="bi bi-heart"
                                         style="margin-top: 10px" viewBox="0 0 16 16">
                                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523
                                        1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368
                                        5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717
                                        2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.0
                                        55.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>

                                    </svg>
                                    {% else %}
                                    <svg id="heart" onclick="add_like({{food.id}})"
                                         xmlns="http://www.w3.org/2000/svg" width="30"
                                         height="30" fill="black" class="bi bi-heart"
                                         style="margin-top: 10px" viewBox="0 0 16 16">
                                        <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523
                                        1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368
                                        5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717
                                        2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.0
                                        55.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>

                                    </svg>
                                    {% endif %}
                                </a>
                            </div>
                            <div class="col-4">
                                <a id="complaint" href="/complaint/add?id={{food.id}}"
                                   class="btn btn-primary">Жалоба
                                </a>
                            </div>
                            <div class="col-4">
                                <div>
                                    <svg id="compare" onclick="test({{food.id}})"
                                         xmlns="http://www.w3.org/2000/svg" width="50" height="50"
                                         fill="#22742b" class="bi bi-plus-circle-fill" viewBox="0 0 16 16">
                                        <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM8.5
                                        4.5a.5.5 0 0 0-1 0v3h-3a.5.5
                                        0 0 0 0 1h3v3a.5.5 0 0 0 1 0v-3h3a.5.5 0 0 0 0-1h-3v-3z"/>
                                    </svg>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        {% endfor %}
        <!-- <button onclick="test()">PLS</button> -->
        <div id="test_field"></div>
  </div>
<script>
function test(fruit_id) {
    let req = new XMLHttpRequest()

    req.open(method="GET", url=`/comprasion/add/?id=${fruit_id}`, async=true)

    req.onload = function() {
        let data = JSON.parse(req.response)
        test_field.innerHTML = data.data
    }
    req.onerror = function() {
        test_field.innerHTML = "error"
    }

    req.send()
}
function add_like(fruit_id) {
    let req = new XMLHttpRequest()

    event.preventDefault()

    req.open(method="GET", url=`/like/add/?id=${fruit_id}`, async=true)

    req.send()
}
</script>

{% endblock %}
